<template>
  <div style="width: 1000px">
    <el-row :gutter="10">
      <el-col :span="16">
        <div style="background-color: white">
          <el-menu style="width: 100%"
                   default-active="/index/recommend"
                   mode="horizontal"
                   text-color="#8493a5"
                   router="true">
            <el-menu-item index="/index/concern" >关注</el-menu-item>
            <el-menu-item index="/index/recommend">推荐</el-menu-item>
            <el-menu-item index="/index/hot">热搜</el-menu-item>
            <el-menu-item index="/index/video">视频</el-menu-item>
          </el-menu>
          <router-view/>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="
        /*border: 1px solid #e9e9eb;*/
        position: fixed;
        width: 333px">
          <div style="padding: 0 14px;
          height: 320px;margin-bottom: 10px;
          background-color: white;">
            <div style="height: 50px;line-height: 50px;">
              <el-row>
               <el-col :span="2">
                 <div style="margin: 0 auto">
                   <el-icon><EditPen /></el-icon>
                 </div>
               </el-col>
               <el-col :span="17"><div>创作中心</div></el-col>
                <el-col :span="5"><div style="color: #8493a5;font-size: 12px">草稿箱(0)</div></el-col>
              </el-row>
            </div>

            <div style="margin: 8px auto;height: 70px;text-align: center;">
              <el-row>
               <el-col :span="6">
                 <div style="cursor: pointer;height: 70px" @click="router.push('')">
                    <div class="hdwt">
                      <el-icon><Tickets /></el-icon>
                    </div>
                    <div style="font-size: 12px">
                      回答问题
                    </div>
                 </div>
               </el-col>
               <el-col :span="6">
                 <div style="cursor: pointer;height: 70px" @click="router.push('/zvideo/upload-video')">
                   <div class="fsp" style="">
                     <el-icon><VideoCamera /></el-icon>
                   </div>
                   <div style="font-size: 12px">
                     发视频
                   </div>
                 </div>
               </el-col>
               <el-col :span="6">
                 <div style="cursor: pointer;height: 70px" @click="router.push('/write')">
                   <div class="xwz" >
                     <el-icon><EditPen /></el-icon>
                   </div>
                   <div style="font-size: 12px">
                     写文章
                   </div>
                 </div>
               </el-col>
               <el-col :span="6">
                 <div style="cursor: pointer;height: 70px">
                   <div class="xxf">
                     <el-icon><Memo /></el-icon>
                   </div>
                   <div style="font-size: 12px">
                     写想法
                   </div>
                 </div>
               </el-col>
              </el-row>
            </div>

            <el-card style="height: 105px;background-color: rgba(132, 147, 165, 0.1)">
              <el-row>
                <el-col :span="16">
                  <div style="height: 60px">
                    <p style="font-weight: bold;margin-bottom: 10px">开启你的知友圈创作吧</p>
                    <span style="font-size: 12px;color: #8493a5">发布首篇内容，开通创作中心 快来成为知乎创作者吧～</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <img src="https://static.zhihu.com/heifetz/assets/kanshan.0c7f1d08.png" style="height: 70px;margin-top: 0" alt="">
                </el-col>
              </el-row>
            </el-card>

            <div>
              <div style="margin: 20px 1%">
                <el-button type="primary" size="large" style="width: 300px" @click="router.push('/creator/center')" plain>开始创作</el-button>
              </div>
            </div>
          </div>

          <div style="background-color: white;
          height: 325px;padding: 0 14px;">
            <div style="height: 50px;line-height: 50px;">
              <el-row>
                <el-col :span="2">
                  <div style="margin: 0 auto">
                    <el-icon><User /></el-icon>
                  </div>
                </el-col>
                <el-col :span="22"><div>推荐关注</div></el-col>
              </el-row>
            </div>
            <div>
              <div style="height: 50px;margin-bottom: 10px" v-for="item in concern">
                <el-row>
                 <el-col :span="5">
                   <div class="gz" style="">
                     <img :src="item.avatar" style="height: 50px" alt="">
                   </div>
                 </el-col>
                 <el-col :span="14">
                   <div class="gz" style="">
                     <div style="font-size: 14px;margin-top: 5px">{{item.username}}</div>
                     <div style="padding: 3px;font-size: 12px">{{item.titile}}</div>
                   </div>
                 </el-col>
                 <el-col :span="5"><div class="gz" style="line-height: 60px;font-size: 14px;color: #1989fa;padding: 0 15px">关注</div></el-col>
                </el-row>
              </div>

              <el-pagination
                  :page-size="4"
                  layout="prev, pager, next"
                  :total="12"
                  style="margin: 0 24%"
                  v-model:current-page="currentPage"
                  @current-change="handleCurrentChange"
              />
            </div>

          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from "@/router";
import {ref} from "vue";


const concern=ref([
  {
    "avatar": 'https://pic1.zhimg.com/v2-174a4dfbfefc1b9f4ac430f9fb2800ea_l.jpg?source=a0c391dc',
    "username": '曾样轩',
    "titile": '「历史」领域答主'
  },
  {
    "avatar": 'https://pic1.zhimg.com/v2-174a4dfbfefc1b9f4ac430f9fb2800ea_l.jpg?source=a0c391dc',
    "username": '曾样轩',
    "titile": '「历史」领域答主'
  },
  {
    "avatar": 'https://pic1.zhimg.com/v2-174a4dfbfefc1b9f4ac430f9fb2800ea_l.jpg?source=a0c391dc',
    "username": '曾木羊车干',
    "titile": '「历史」领域答主'
  },
  {
    "avatar": 'https://pic1.zhimg.com/v2-174a4dfbfefc1b9f4ac430f9fb2800ea_l.jpg?source=a0c391dc',
    "username": '曾样轩',
    "titile": '「历史」领域答主'
  },
])
const currentPage=ref()
const handleCurrentChange=(number)=>{
  console.log(number)
}


</script>

<style scoped>
.gz{
  height: 50px;
  cursor: pointer;
}
.setup{
  height: 100px;
  border-bottom: 1px solid #e9e9eb;
  padding: 20px 18px;

}
p{
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}
.fsp{
  line-height: 45px;font-size: 25px;color: palevioletred;
  height: 40px;width: 40px;margin: 0 auto;border-radius: 50%;
  margin-bottom: 8px;
  background-color: rgba(240,10,136,0.3);
}
.fsp:hover{
  background-color: rgba(240,10,136,0.5);
}

.xwz{
  line-height: 45px;font-size: 25px;color: #42b983;
  height: 40px;width: 40px;margin: 0 auto;border-radius: 50%;
  margin-bottom: 8px;
  background-color: rgba(1,255,5,0.3);

}
.xwz:hover{
  background-color: rgba(1,255,5,0.6)
}

.hdwt{
  line-height: 45px;font-size: 25px;color: #42b983;
  height: 40px;width: 40px;margin: 0 auto;border-radius: 50%;
  margin-bottom: 8px;
  background-color: rgba(80,250,24,0.3)
}
.hdwt:hover{
  background-color: rgba(80,250,24,0.6)
}

.xxf{
  line-height: 45px;font-size: 25px;color: rgb(244,200,7);
  height: 40px;width: 40px;margin: 0 auto;border-radius: 50%;
  margin-bottom: 8px;
  background-color: rgba(244,200,7,0.3)
}
.xxf:hover{
  background-color: rgba(244,200,7,0.6)
}

.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
  margin: 0 auto;
}
</style>